<template>
  <div class="bgbox">
    <!-- <van-nav-bar left-text="返回"
                 left-arrow
                 style="height:25px"
                 :border='false'
                 @click-left="onClickLeft" /> -->
    <!-- 两个套餐 -->
    <div class="combo">
      <div class="comimg">
        <img src="@/assets/images/bg.png">
        <div class="comtext">59元套餐</div>
        <img class="rightimg"
             v-if="num == 58"
             src="@/assets/images/dbg.png">
        <!-- 三角形 -->
        <div v-if="num == 58"
             class="sjxbox"></div>
      </div>
      <div class="comimg">
        <img src="@/assets/images/bg.png">
        <div class="comtext">89元套餐</div>
        <img class="rightimg"
             v-if="num == 89"
             src="@/assets/images/dbg.png">
        <!-- 三角形 -->
        <div class="sjxbox"
             v-if="num == 89"></div>
      </div>
    </div>
    <!-- 套餐 -->
    <div class="details">感谢您对联合信任多年的支持和信赖，为了提供更加优质的产品和服务，满足广大用户多样化的产品需求，联合信任已经完成了系统升级的技术研发和基础设施建设工作。我们计划于2021年11月13日22时 至 2021年11月14日5时 对系统进行升级维护，新系统上线后部分计费规则同步进行调整。升级期间我们将暂停电子证据服务平台（ev.tsa.cn）、知识产权保护平台（ipr.tsa.cn)、权利卫士app、壹签电子签约平台（1sign.cn）的服务，届时用户无法登录、充值和使用。其它系统和服务不受影响。</div>
    <!-- 说明 -->
    <div class="explain">账户中心统一后，原电子证据平台、知识产权保护平台、权利卫士app的账户余额累加到统一账户中心，同一账号下购买的不同平台的时间戳将合并后统计剩余个数；用户可以在统一账户中心查看余额、历史充值总数、订单明细、消费明细等。</div>
    <!-- 单选 -->
    <div class="xuanze">
      <van-checkbox v-model="checked"
                    icon-size="16px"
                    shape="square">
        <span style="color:#fff">以上详情已阅且认同</span>
      </van-checkbox>
    </div>
    <div class="imgbut"
         @click="affirmClick">
      <img src="@/assets/images/dbg.png"
           alt="">
      <div>确认办理</div>
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'

// import md5 from 'blueimp-md5'
// ~@/assets/logo.png
import { useRoute, useRouter } from 'vue-router'
// 格式化日期的
import { formatDate } from '@/utils/common'
import userApi from '@/api/mobile_user/index'
import { Toast, Dialog } from 'vant'
import { Storage } from '@/utils/Storage'
import { MOBILE_TOKEN, MOBILE_USER } from '@/store/mutation-types'
import { useStore } from '@/store'

export default defineComponent({
  name: 'Login',
  components: {},
  setup() {
    const { proxy }: any = getCurrentInstance()
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const state: any = reactive({
      num: 58,
      checked: false
    })
    function onClickLeft() {
      router.go(-1)
    }
    // 办理
    function affirmClick() {
      console.log('办理')
      if (state.checked) {
      } else {
        Toast('请勾选上方认同规则')
      }
    }
    // 关闭
    onMounted(() => {
      window.scroll(0, 0)
    })

    return {
      ...toRefs(state),
      onClickLeft,
      affirmClick
    }
  }
})
</script>

<style lang="scss" scoped>
.bgbox {
  position: relative;
  width: 100%;
  height: 667px;
  padding: 0;
  margin: 0;
  //   background: #5b87ee;
  background-image: url(../../../assets/images/bg.png);
  background-size: 100% 100%;
  background-position: center center;
  .combo {
    display: flex;
    justify-content: space-around;
    padding: 50px 20px 0 20px;
    .comimg {
      position: relative;
      border: 1px solid red;
      img {
        width: 150px;
        height: 60px;
      }
      .comtext {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .rightimg {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
      }
      .sjxbox {
        position: absolute;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid #1ccfff;
        left: 50%;
        bottom: -15px;
        transform: translate(-50%, 0);
      }
    }
  }
  // 详情文本
  .details {
    width: 320px;
    height: 210px;
    margin: 30px auto;
    padding: 8px 15px;
    background: #243144;
    overflow-y: scroll;
    // opacity: 0.5;
    color: #fff;
  }
  .explain {
    width: 320px;
    height: 160px;
    margin: -15px auto;
    background: #243144;
    padding: 8px 15px;
    // opacity: 0.5;
    color: #fff;
  }
  .xuanze {
    // background: chartreuse;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 35px;
  }
  .imgbut {
    position: relative;
    text-align: center;
    margin-top: 20px;
    img {
      width: 120px;
      height: 40px;
    }
    div {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
  }
}
::-webkit-scrollbar {
  // 直接复制黏贴到样式页.css，完美解决
  display: none;
  width: 0px;
}
</style>
